<template>
	<div>
		<div class="team-box"><el-carousel :autoplay="false"  indicator-position="none" trigger="click" height="220px">
		    <el-carousel-item class="teams-box"  v-for="(value,index) in sum" :key="value">
		       <span class="teams" :class="{'before':teamList[index*num+i].teamName.length>8}" 
		       		v-for="(v,i) in num" v-if="teamList[index*num+i]"  
		       		:data-title="teamList[index*num+i].teamName"
		       		@click="changeTeamId(teamList[index*num+i].teamId)" >
		       		
		       		<img width="30" height="30" 
		       			:src="teamList[index*num+i]?teamList[index*num+i].teamIcon||initImg:null"/>
		       		
		       		<span   class="text-overflow" >{{teamList[index*num+i]?teamList[index*num+i].teamName:null}}</span>
		       		

		       </span>
		    </el-carousel-item>
   		 </el-carousel>
		</div>
		
   		 <team-details :teamId="teamId"></team-details>
		
	</div>
	
	
</template>

<script>
	import teamDetails from '@/pages/TeamDetails'
	
	export default{
		name:'TeamDetails',
		components:{
			teamDetails
		},
		props:['comId'],
		data(){
			return {
				teamList:[],
				num:18	,
				teamId:''
			}
		},
		computed:{
			sum:function(){
				return (this.teamList.length/this.num)%1>0 ? parseInt(this.teamList.length/this.num)+1:this.teamList.length/this.num
			}
		},
		mounted(){
			this.getTeams();
			
		},
		methods:{
			getTeams:function(){
				this.$axios.post(
					'http://101.37.33.145:3100/weixin/findTeamsBasicByLeague.do',
					{
						leagueId:this.comId
	
					}
				).then(
					res=>{this.teamList=res.data;this.teamId=this.teamList[0].teamId}
				).catch(err=>{
					console.log(err,'获取所有球队 ,失败了')
				})
			},
			changeTeamId:function(val){
				this.teamId=val
			}
		}
	}
</script>

<style scoped="scoped">
	.team-box{
		margin-bottom: 20px;
		padding: 5px;
		box-sizing: border-box;
		/*border: 2px solid #009999 ;*/
		border-radius: 5px;
		
	}
	img{
		vertical-align: middle;
	}
	
 	 .teams-box{
 	 	box-sizing: border-box;
 	 	display: flex;
 	 	justify-content: flex-start;
 	 	flex-wrap: wrap;
 	 }
 	 .teams{
 	 	position: relative;
 	 	box-sizing: border-box;
 	 	width:calc( (100% - 100px ) / 6 ) ;
 	 	height: 50px;
 	 	padding-left:10px;
 	 	line-height: 50px;
 	 	font-size: 14px;
 	 	text-align: left;
 		border:1px solid #B8BABB;
  	 	box-shadow: 0 0 .5px .5px #B8BABB inset;
  	 	border-radius: 4px;
 	 }
 	 .teams.before:before{
 	 	display: none;
 	 	position: absolute;
 	 	top: 52px;
 	 	left: 0;
 	 	content:attr(data-title);
 	 	width: 100%;
 	 	line-height: 20px;
 	 	text-align: center;
 	 	background-color: #77C1C4;
 	 	border-radius: 10px;
 	 	
 	 }
 	 .text-overflow{
 	 	display: inline-block;
 	 	box-sizing: border-box;
 	 	width: 70%;
 	 	padding:0 5px;
 	 	overflow: hidden;
 	 	white-space: nowrap;
 		text-overflow: ellipsis;
 	 	vertical-align:middle ;
 	 }
 	 
 	 
 	 .teams:not(:nth-of-type(6n)){
 	 	margin-right: 20px;
 	 }
 	 .teams:hover{
 	 	background-color: #77C1C4;
 	 	color: white;
 	 }
 	 .teams.before:hover:before{
 		 display: block;
 	 	color:whitesmoke;
 	 	font-weight: 900;
 	 	font-size: 12px;
 	 }
 	 
 	 
</style>